<template>
  <button
    :class="[
      'custom-button',
      buttonClass,
      `custom-button--${type}`,
      `custom-button--${size}`,
      {
        'custom-button--disabled': disabled,
        'custom-button--loading': loading,
        'custom-button--block': block,
        'custom-button--round': round
      }
    ]"
    :style="[buttonStyle, customStyle]"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <!-- 加载状态 -->
    <view v-if="loading" class="button-loading">
      <text class="loading-icon iconfont-v2 icon-jiazai"></text>
    </view>

    <!-- 左侧图标 -->
    <text 
      v-if="leftIcon && !loading" 
      :class="['button-icon', 'left-icon', leftIcon]"
    ></text>

    <!-- 按钮文本 -->
    <text v-if="!loading" class="button-text">{{ text }}</text>

    <!-- 右侧图标 -->
    <text 
      v-if="rightIcon && !loading" 
      :class="['button-icon', 'right-icon', rightIcon]"
    ></text>

    <!-- 自定义插槽 -->
    <slot v-if="!loading" />
  </button>
</template>

<script>
/**
 * 通用按钮组件
 * @description 通用的按钮组件，支持多种类型、大小和状态
 * @author 系统
 * @date 2024
 */

export default {
  name: 'CustomButton',
  props: {
    // 按钮文本
    text: {
      type: String,
      default: '按钮'
    },
    // 按钮类型: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
    type: {
      type: String,
      default: 'primary',
      validator: value => ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'text'].includes(value)
    },
    // 按钮大小: 'small' | 'medium' | 'large'
    size: {
      type: String,
      default: 'medium',
      validator: value => ['small', 'medium', 'large'].includes(value)
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否加载中
    loading: {
      type: Boolean,
      default: false
    },
    // 是否块级按钮
    block: {
      type: Boolean,
      default: false
    },
    // 是否圆角按钮
    round: {
      type: Boolean,
      default: false
    },
    // 左侧图标
    leftIcon: {
      type: String,
      default: ''
    },
    // 右侧图标
    rightIcon: {
      type: String,
      default: ''
    },
    // 自定义类名
    buttonClass: {
      type: String,
      default: ''
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({})
    },
    // 按钮宽度
    width: {
      type: String,
      default: ''
    },
    // 按钮高度
    height: {
      type: String,
      default: ''
    }
  },
  computed: {
    buttonStyle() {
      const style = {}
      
      if (this.width) {
        style.width = this.width
      }
      
      if (this.height) {
        style.height = this.height
      }
      
      return style
    }
  },
  methods: {
    handleClick(event) {
      if (this.disabled || this.loading) return
      this.$emit('click', event)
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  font-family: inherit;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  // 大小变体
  &--small {
    padding: 16rpx 24rpx;
    font-size: 24rpx;
    border-radius: 32rpx;
    min-height: 64rpx;
  }

  &--medium {
    padding: 24rpx 32rpx;
    font-size: 28rpx;
    border-radius: 40rpx;
    min-height: 80rpx;
  }

  &--large {
    padding: 32rpx 48rpx;
    font-size: 32rpx;
    border-radius: 48rpx;
    min-height: 96rpx;
  }

  // 类型变体
  &--primary {
    background: #ED6567;
    color: white;
    border: 2rpx solid #ED6567;

    &:hover:not(.custom-button--disabled) {
      background: #d55a54;
      border-color: #d55a54;
    }

    &:active:not(.custom-button--disabled) {
      background: #c44e47;
      border-color: #c44e47;
    }
  }

  &--secondary {
    background: #f5f5f5;
    color: #666;
    border: 2rpx solid #e5e5e5;

    &:hover:not(.custom-button--disabled) {
      background: #e8e8e8;
      border-color: #d5d5d5;
    }

    &:active:not(.custom-button--disabled) {
      background: #ddd;
      border-color: #ccc;
    }
  }

  &--success {
    background: #52c41a;
    color: white;
    border: 2rpx solid #52c41a;

    &:hover:not(.custom-button--disabled) {
      background: #45a017;
      border-color: #45a017;
    }

    &:active:not(.custom-button--disabled) {
      background: #389e0d;
      border-color: #389e0d;
    }
  }

  &--warning {
    background: #ff9500;
    color: white;
    border: 2rpx solid #ff9500;

    &:hover:not(.custom-button--disabled) {
      background: #e6850e;
      border-color: #e6850e;
    }

    &:active:not(.custom-button--disabled) {
      background: #cc7000;
      border-color: #cc7000;
    }
  }

  &--danger {
    background: #ff4d4f;
    color: white;
    border: 2rpx solid #ff4d4f;

    &:hover:not(.custom-button--disabled) {
      background: #e63e40;
      border-color: #e63e40;
    }

    &:active:not(.custom-button--disabled) {
      background: #cc2e30;
      border-color: #cc2e30;
    }
  }

  &--info {
    background: #1890ff;
    color: white;
    border: 2rpx solid #1890ff;

    &:hover:not(.custom-button--disabled) {
      background: #0d7ae6;
      border-color: #0d7ae6;
    }

    &:active:not(.custom-button--disabled) {
      background: #0066cc;
      border-color: #0066cc;
    }
  }

  &--text {
    background: transparent;
    color: #ED6567;
    border: none;
    padding: 16rpx 24rpx;

    &:hover:not(.custom-button--disabled) {
      background: rgba(237, 101, 103, 0.1);
    }

    &:active:not(.custom-button--disabled) {
      background: rgba(237, 101, 103, 0.2);
    }
  }

  // 状态变体
  &--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }

  &--loading {
    cursor: not-allowed;
    pointer-events: none;
  }

  &--block {
    width: 100%;
    display: flex;
  }

  &--round {
    border-radius: 50%;
    padding: 0;
    min-width: 80rpx;
    min-height: 80rpx;
  }

  // 按钮内容
  .button-loading {
    display: flex;
    align-items: center;
    justify-content: center;

    .loading-icon {
      font-size: 28rpx;
      animation: spin 1s linear infinite;
    }
  }

  .button-icon {
    font-size: 28rpx;
    margin: 0 8rpx;

    &.left-icon {
      margin-left: 0;
      margin-right: 8rpx;
    }

    &.right-icon {
      margin-left: 8rpx;
      margin-right: 0;
    }
  }

  .button-text {
    font-weight: 500;
    line-height: 1;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 特殊样式变体
.custom-button {
  // 渐变按钮
  &--gradient {
    background: linear-gradient(135deg, #ED6567 0%, #ff6b6b 100%);
    border: none;

    &:hover:not(.custom-button--disabled) {
      background: linear-gradient(135deg, #d55a54 0%, #e55a5a 100%);
    }
  }

  // 幽灵按钮
  &--ghost {
    background: transparent;
    border: 2rpx solid currentColor;

    &.custom-button--primary {
      color: #ED6567;
      border-color: #ED6567;

      &:hover:not(.custom-button--disabled) {
        background: #ED6567;
        color: white;
      }
    }
  }

  // 毛玻璃效果
  &--glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20rpx);
    border: 2rpx solid rgba(255, 255, 255, 0.3);
    color: white;

    &:hover:not(.custom-button--disabled) {
      background: rgba(255, 255, 255, 0.3);
    }
  }
}
</style>
